<!-- 
  新增的两个生命周期钩子函数
    如果组件被 keep-alive 组件包裹且缓存了的化，那么该组件会多出两个生命周期钩子
    1. activated      激活
        1. 默认会在挂载完成之后，触发一次
        2. 当组件重新可以被看到的时候
    2. deactivated    失活
        1. 当组件被隐藏的时候

 -->

<template>
  <div>
    <h1>App</h1>

    <button
      v-for="tab in tabs"
      :key="tab.name"
      :class="{ active: tab.name === curTabName }"
      @click="curTabName = tab.name"
    >
      {{ tab.label }}
    </button>

    <hr />

    <KeepAlive>
      <component :is="curTabName"></component>
    </KeepAlive>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Category from "./components/Category.vue";
import Cart from "./components/Cart.vue";

export default {
  components: {
    Home,
    Category,
    Cart,
  },

  data() {
    return {
      tabs: [
        { label: "首页", name: "Home" },
        { label: "分类页", name: "Category" },
        { label: "购物车", name: "Cart" },
      ],
      curTabName: "Home",
    };
  },
};
</script>

<style>
@import "./global.css";
</style>
